<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

	<meta charset="UTF-8">
	<title>-webkit-transform demo</title>
	

<link rel="stylesheet" type="text/css" href="transform_001_1.css" media="all">
</head>
<body>
<h1>-webkit-transform</h1>
<dl id="control" class="control">
	<dt class="trans_css_line">transform: <span id="trans_css"></span>;</dt>
	<dt>transform 2D:</dt>
	<dd>translate(<input id="translate_x" min="-100" max="100" step="10" value="0" type="number">px, <input id="translate_y" min="-100" max="100" step="10" value="0" type="number">px)</dd>
	<dd>rotate(<input id="rotate" min="0" max="360" step="10" value="0" type="number">deg)</dd>
	<dd>scale(<input id="scale_x" min="0" max="2" step="0.2" value="1" type="number">, <input id="scale_y" min="0" max="2" step="0.2" value="1" type="number">)</dd>
	<dd>skew(<input id="skew_x" min="0" max="90" step="5" value="0" type="number">, <input id="skew_y" min="0" max="90" step="5" value="0" type="number">)</dd>
	<dd>matrix(<input id="matrix_a" min="-5" max="5" step="1" value="1" type="number">, <input id="matrix_b" min="-5" max="5" step="1" value="0" type="number">, <input id="matrix_c" min="-5" max="5" step="1" value="0" type="number">, <input id="matrix_d" min="-5" max="5" step="1" value="1" type="number">, <input id="matrix_e" min="-100" max="100" step="10" value="0" type="number">, <input id="matrix_f" min="-100" max="100" step="10" value="0" type="number">)</dd>
	<dt>transform 3D:</dt>
	<dd>translateZ(<input id="3d_translateZ" min="-100" max="100" step="10" value="0" type="number">px)</dd>
	<dd>rotate3d(<input id="3d_rotateX" min="-200" max="200" step="10" value="0" type="number">, <input id="3d_rotateY" min="-200" max="200" step="10" value="0" type="number">, <input id="3d_rotateZ" min="-200" max="200" step="10" value="0" type="number">, <input id="3d_rotateR" min="0" max="360" step="10" value="0" type="number">deg)</dd>
	<dd>scaleZ(<input id="3d_scaleZ" min="0" max="2" step="0.2" value="1" type="number">)</dd>
	<dd>perspective(<input id="3d_perspective" min="0" max="1200" step="50" value="0" type="number">px)</dd>
</dl>
<div id="show_area">Ctrip携程2014</div>
<script type="text/javascript">
	window.onload=function(){
		var control=document.getElementById('control'),
			transCSS=document.getElementById('trans_css'),
			showArea=document.getElementById('show_area'),
			inputList=document.getElementsByTagName('input');

		var len=inputList.length, i=0, transStyle="", trans3DStyle="", totalTransStyle="",
			transList={
				"translate_x":0,
				"translate_y":0,
				"rotate":0,
				"scale_x":1,
				"scale_y":1,
				"skew_x":0,
				"skew_y":0
			},
			transMatrix={
				"matrix_a":1,
				"matrix_b":0,
				"matrix_c":0,
				"matrix_d":1,
				"matrix_e":0,
				"matrix_f":0
			},
			trans3DList={
				"3d_translateZ":0,
				"3d_rotateX":0,
				"3d_rotateY":0,
				"3d_rotateZ":0,
				"3d_rotateR":0,
				"3d_scaleZ":1,
				"3d_perspective":0
			};

		for(i; i<len; i++){
			inputList[i].onchange=function(){
				var idName=this.id, filterStr=idName.substring(0, idName.indexOf('_')), inputVal=parseFloat(this.value);

				switch(filterStr){
					case "matrix":
						transStyle="";
						transMatrix[idName]=inputVal?inputVal:0;
						transStyle="matrix("+
									transMatrix['matrix_a']+","+
									transMatrix['matrix_b']+","+
									transMatrix['matrix_c']+","+
									transMatrix['matrix_d']+","+
									transMatrix['matrix_e']+","+
									transMatrix['matrix_f']+
									")";
						break;
					case "3d":
						trans3DStyle="";
						trans3DList[idName]=inputVal?inputVal:0;
						if(trans3DList["3d_translateZ"]){
							trans3DStyle+=" translateZ("+trans3DList['3d_translateZ']+"px)";
						}
						if(trans3DList["3d_rotateR"]){
							trans3DStyle+=" rotate3d("+trans3DList['3d_rotateX']+","+trans3DList['3d_rotateY']+","+trans3DList['3d_rotateZ']+","+trans3DList['3d_rotateR']+"deg)";
						}
						if(!(trans3DList["3d_scaleZ"]===1)){
							trans3DStyle+=" scaleZ("+trans3DList['3d_scaleZ']+")";
						}
						if(trans3DList["3d_perspective"]){
							trans3DStyle+=" perspective("+trans3DList['3d_perspective']+"px)";
						}
						break;
					default:
						transStyle="";
						transList[idName]=inputVal?inputVal:0;
						if(transList["translate_x"]||transList["translate_y"]){
							transStyle+=" translate("+transList['translate_x']+"px, "+transList['translate_y']+"px)";
						}
						if(transList["rotate"]){
							transStyle+=" rotate("+transList['rotate']+"deg)";
						}
						if((transList["scale_x"]!==1)||(transList["scale_y"]!==1)){
							transStyle+=transList["scale_x"]===transList["scale_y"]?" scale("+transList['scale_x']+")":" scale("+transList['scale_x']+", "+transList['scale_y']+")";
						}
						if(transList["skew_x"]||transList["skew_y"]){
							transStyle+=" skew("+transList['skew_x']+"deg, "+transList['skew_y']+"deg)";
						}
				}

				totalTransStyle=transStyle+trans3DStyle;
				showArea.style.webkitTransform=totalTransStyle;
				showArea.style.transform=totalTransStyle;
				transCSS.innerHTML=totalTransStyle;
			}
		}
	}
</script>

</body>
</html>
